<!--
 * @Author: ltl
 * @Date: 2023-8-17 11:07:27
 * @LastEditors: ltl
 * @LastEditTime: 2023-8-17 11:07:27
 * @Description: 个人中心页面
-->
<template>
  <div class="user">
    <div v-if="orderSource = 'youjiao_gaoshou_app'">
      <!-- 高手 -->
      <div class="no-shrink">
        <StudentHeadExpert :userInfo="userInfo" :isSingn="isSingn"/>
      </div>
      <VipExpert :vipData="vipData"></VipExpert>
    </div>
    <div class="parent_app" :style="{ height: userInfo.usertype === '0' ? '218px' : '150px' }" v-else>
      <!-- 家辅 -->
      <div class="head">
        <div class="head-content">
          <StudentHeadParent :userInfo="userInfo" :isSingn="isSingn" @changeSignStatus="changeSignStatus"></StudentHeadParent>
        </div>
      </div>
      <VipParent :vipData="vipData"></VipParent>
      <div class="student_box" v-if="userInfo.usertype === '0'">
        <StudentHeadParent :type="1" :userInfo="userInfo" :isSingn="isSingn" @changeSignStatus="changeSignStatus"></StudentHeadParent>
      </div>
    </div>
    <!-- 订单信息 -->
    <div class="orderGoods" :style="{ margin: userInfo.usertype === '0' ? '43px 18px 8px' : '16px 18px 8px' }">
      <div class="orderGoods_top">
        <span class="myOrderGoods">我的订单</span>
        <span class="tall">全部 ></span>
      </div>
      <div class="orderGoods_bottom">
        <div class="orderGoods_img" v-for="item in orderGoodsList" :key="item.orderState" @click="goOrderGoods(item.orderState)">
          <img :src="require(`@/assets/images/user/${item.imgName}.png`)" alt="">
          <span class="name">{{ item.name }}</span>
          <span class="num" v-if="item.num > 0">{{ item.num }}</span>
        </div>
      </div>
    </div>
    <component :is="components[item.component]" :datas="item" v-for="(item, index) in channelList" :key="index"  :color="headColor" :vipData="vipData" :ref="item.component"/>
    <!-- <div class="no-shrink">
        <component :is="components.tabBar"  :datas="tabBar" :active="active" v-if="Object.keys(tabBar).length>0" @update="changeActive"/>
    </div> -->
  </div>
</template>

<script>
import { components, components1 } from '../../common/setting';
import { StudentHeadExpert, VipExpert, StudentHeadParent, VipParent } from '../../components';
import { userServices, externalLinkServices, myPageServices } from '@/api';
import { getParameter, getLink } from '../../common/comfun';
import { UpdateUCoins } from '@/utils/ub.js';
import { Icon } from 'yj-mob-ui';
import { Base64 } from 'js-base64';
import { getStudentCode, getPart } from '@/api/getContentApi';
import { getAuthTokenUserInfo } from '@/utils';
export default {
  components: {
    [Icon.name]: Icon,
    StudentHeadExpert,
    VipExpert,
    VipParent,
    StudentHeadParent,
    components
  },
  data () {
    return {
        userInfo: {},
        components: components1,
        tabBar: {}, // 底部导航接口数据
        active: 1,
        isSingn: 0,
        orderSource: '',
        vipData: {},
        channelList: [],
        headColor: '',
        orderGoodsList: [
          {
            orderState: 1,
            name: '待付款',
            imgName: 'obligation'
          },
          {
            orderState: 2,
            name: '待发货',
            imgName: 'toBeShipped'
          },
          {
            orderState: 3,
            name: '待收货',
            imgName: 'received'
          },
          {
            orderState: 4,
            name: '已完成',
            imgName: 'complete'
          },
          {
            orderState: 5,
            name: '退款/售后',
            imgName: 'afterSales'
          }
        ]
    };
  },
  async created () {
    console.log(window.location.href, '路径');
    // 优学高手or家辅
    var productCode = localStorage.getItem('productCode') ? localStorage.getItem('productCode') : '';
    if (productCode === '7808965880258962499' || productCode === '7810451715628099727') {
      this.orderSource = 'youjiao_gaoshou_app';
    } else {
      this.orderSource = 'youjiao_parent_app';
      // 签到状态
      this.getSignStatus();
    }
    this.tabBar = localStorage.getItem('tabBar') ? JSON.parse(localStorage.getItem('tabBar')) : {};
    // 个人信息
    const res = await userServices.getUserInfo();
    if (res.code === '200') {
      var userData = getAuthTokenUserInfo();
      if (userData.usertype === '0') {
        // 如果为家长 查询家长信息 主要查询手机号
        this.parentInfo();
      }
      this.userInfo = res.data;
      this.$set(this.userInfo, 'usertype', userData.usertype);
    }
    if (!localStorage.getItem('userInitInfo')) {
      this.getStudentCode();
    }
    // 会员信息
    this.getUserProdInfo();
    // 查询用户各个状态订单数量
    this.getStateNum();
  },
  methods: {
    // 家长信息
    async parentInfo () {
      const res = await userServices.getParentInfo();
      if (res.code === 200) {
        this.$set(this.userInfo, 'phone', res.data.user.phone);
      }
    },
    filterPath (name, type) {
      const mainList = JSON.parse(localStorage.getItem('mainList')),
      fiterPath = mainList.filter(item => item[name] === type);
      return fiterPath.length > 0 ? fiterPath[fiterPath.length - 1].jsonPath : '';
    },
    // 获取用户的基本信息
    async getStudentCode () {
      const res = await getStudentCode();
      if (!res.data.gradeCode) {
        res.data.gradeCode = res.data.studentGradeCode;
      }
      if (!res.data.termCode) {
        res.data.termCode = res.data.currentTermCode;
      }
      localStorage.setItem('userInitInfo', JSON.stringify(res.data));
      localStorage.setItem('gradeCode', res.data.gradeCode);
      if (this.$route.query.productCode) {
        localStorage.setItem('productCode', this.$route.query.productCode);
      }
    },
    // 会员信息
    async getUserProdInfo () {
      const res = await myPageServices.getUserProdInfo({ orderSource: this.orderSource });
      if (res.code === 200) {
        this.vipData = res.data;
        var templateUrl = Base64.decode(JSON.parse(this.$route.query.requestParam).templateUrl);
        if (templateUrl.indexOf('.json') !== -1) {
          const url = getParameter(templateUrl, 'alias'),
            templateType = localStorage.getItem('templateType');
            var channelRes1 = await getPart(this.filterPath('alias', url), templateType);
          if (channelRes1) {
            this.channelList = JSON.parse(channelRes1.component);
            console.log(this.channelList, 'channelList');
          }
        }
      }
    },
    // 查询用户各个状态订单数量
    async getStateNum () {
      const res = await myPageServices.getStateNum({ orderSource: this.orderSource });
      if (res.code === 200) {
        this.orderGoodsList.map((item) => {
          res.data.map((item2) => {
            if (item.orderState === item2.orderState) {
              var json = { num: item2.num };
              Object.assign(item, json);
              return item;
            }
          });
        });
      }
    },
    // 订单
    goOrderGoods (orderState) {
      window.location.href = externalLinkServices.myOrder + `?orderState=${orderState}`;
    },
    async changeSignStatus () {
      const query = {
        code: '5710104354425569553',
        refType: '5',
        section: this.userInfo.studyStageCode,
        grade: this.userInfo.gradeCode,
        volume: localStorage.getItem('userInitInfo') ? JSON.parse(localStorage.getItem('userInitInfo')).termCode : ''
      },
      res = await userServices.SignIn(query);
      if (res.code === '200') {
          var p = {
          at: 'u',
          c: 'u_signin',
          s: 7,
          i: '签到得积分'
        };
        UpdateUCoins(p).then(async res1 => {
            console.log(res1);
          if (res1[0].result === '1') {
            this.$toast('签到成功');
            await this.getSignStatus();
          }
        });
      }
    },
    goIntegral () {
      window.location.href = externalLinkServices.integralLink;
    },
    goHelp () {
      window.location.href = externalLinkServices.helpLink;
    },
          /**
     * @description: 改变底部导航的值
     * @param {*} value
     * @Author: ckk
     * @Date: 2022-08-22 19:51:07
     * @return {*}
     */
    changeActive (value) {
      if (value.index !== this.active) {
        this.active = value.index;
      if (getLink(value.urlname)) {
        this.$router.push({ name: getLink(value.urlname) });
      } else {
        this.$toast('暂无跳转链接');
      }
      }
    },
    /**
     * @description: 获取学生今日签到的状态
     * @param {*}
     * @Author: ckk
     * @Date: 2022-10-21 16:52:39
     * @return {*}
     */
    async getSignStatus () {
      const res = await userServices.getSignStatus();
      if (res.result) {
        this.isSingn = res.result;
      }
    },
    /**
     * 轮播图渲染
     */
    getColor (color) {
      this.headColor = color;
    }
  }
};
</script>
<style lang="scss" scoped>
.user {
  background: #f5f7fa;
  width: 100%;
  min-height: 100%;
  .no-shrink{
    padding-top: 8px;
    // flex-shrink: 0;
    width: 100%;
    height: 170px;
    background-color: #fff;
    border-radius: 0 0 320px 320px/0 0 40px 40px;
  }
  .parent_app{
    padding-top: 47px;
    width: 100%;
    background-color: #53c856FF;
    .head {
      position: relative;
      .head-content {
        position: absolute;
        width: 100%;
      }
    }
    .student_box{
      margin: 0 20px;
      box-sizing: border-box;
      border-radius: 18px;
      background-color: #fff;
    }
  }
  .orderGoods{
    height: 120px;
    background: #FFFFFF;
    border-radius: 12px;
    margin: 16px 18px 8px;
    .orderGoods_top{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      padding: 0 16px;
      box-sizing: border-box;
      height: 44px;
      line-height: 56px;
      .myOrderGoods{
        font-size: 17px;
        font-weight: 600;
      }
      .tall{
        font-size: 14px;
        color: #666666;
      }
    }
    .orderGoods_bottom{
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      .orderGoods_img{
        position: relative;
        text-align: center;
        width: 90px;
        img{
          width: 25px;
          height: 25px;
          vertical-align: middle;
        }
        .name{
          margin-top: 7px;
          font-size: 12px;
          display: block;
          vertical-align: middle;
          color: #333333FF;
        }
        .num{
          position: absolute;
          top: 3px;
          right: 10px;
          min-width: 10px;
          height: 13px;
          line-height: 13px;
          font-size: 12px;
          padding: 1px 5px;
          color: #fff;
          border-radius: 15px 15px 15px 8px;
          background: #FF373D;
        }
      }
    }
  }
}
</style>
